<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 320px;
            height: 240px;
        }
    </style>
</head>
<body>
    <h1 class="title">hello,world</h1>
    <div>
        <img src="images/1.png" alt="">
    </div>
    <button class="btn1">1</button>
    <button class="btn2">2</button>
    <button class="btn3">3</button>
    <script>
        // let h1=document.querySelector("h1")
        // console.log(h1.className)
        let button1=document.querySelector(".btn1")
        let button2=document.querySelector(".btn2")
        let button3=document.querySelector(".btn3")
        let img=document.querySelector("img")
        button1.onclick=function(){
            // console.log(this)
            
            img.src="images/1.png"
        }
        button2.onclick=function(){
            // console.log(this)
            
            img.src="images/2.png"
        }
        button3.onclick=function(){
            // console.log(this)
            
            img.src="images/3.png"
        }
    </script>
</body>
</html>